import React from 'react';
import PageTile from 'component/page-title/index.jsx';
import './index.scss';
import CategoryService from  'service/category-service.jsx';
import Tool from  'tool/tool.jsx';
const _category = new CategoryService();
const _req = new Tool();


//商品编辑组件
class SaveCategoryPage extends React.Component{
  constructor(props){
    super(props);
    this.state={
      parentId: 0,
      categorylist: [],
      categoryName: '',
    };
    this.onLoadCategory = this.onLoadCategory.bind(this);
  }
  componentDidMount(){
     this.onLoadCategory();
  }
  onLoadCategory(){
    _category.getCategoryList(this.state.parentId).then(res=>{
        this.setState({
          categorylist: res
        });
     },errMsg=>{
      _req.errorTips(errMsg);
     });
   }
   //保存用户输入
  onValueChange(e){
   let  inputValue = e.target.value,
        inputName = e.target.name;
    this.setState({
      [inputName]: inputValue
    })
  }
//表单提交
onAllSubmit(){
  let category ={ 
    parentId: parseInt(this.state.parentId),
    categoryName: this.state.categoryName.trim()
  };
 //表单验证
 let categoryCheck = _category.onCheckCategory(category);
 //表单验证成功
 if(categoryCheck.status){
  _category.onSaveCategory(category).then(res=>{
     //成功后给出提示，并跳转回品类列表页
     _req.successTips(res);
     this.props.history.push('/category/index');
   },errMsg=>{
     _req.errorTips(errMsg);
   })
 }
 //表单验证失败
 else{
   _req.errorTips(categoryCheck.msg);
 }
}

 render(){
      return(
        <div id="page-wrapper">
          <PageTile title="品类管理---添加品类"/>
          <div className="row"> 
              <div className="col-md-12">
                <div className="form-horizontal">
                  <div className="form-group">
                      <label  className="col-md-2 control-label">所属分类</label>
                      <div className="col-md-5 cate-wapper">
                          <select   className="col-md-2 form-control"
                                    name="parentId"
                                    onChange={e=>{this.onValueChange(e)}}>
                            <option value="0">根品类/</option>
                            {
                              this.state.categorylist.map(
                                (category,index)=>{
                                  return (
                                    <option key={index} value={category.id}>根品类/{category.name}</option>
                                  )
                              })
                            }
                          </select>                           
                      </div>  
                  </div>     
                  <div className="form-group">
                      <label  className="col-md-2 control-label">品类名称</label>
                      <div className="col-md-3">
                          <input type="text" 
                                 className="form-control"
                                 name="categoryName" 
                                 onChange={e=>this.onValueChange(e)}
                                 placeholder="请输入品类名称"/>
                      </div>
                  </div>
                  <div className="form-group">
                      <div className="col-md-offset-2 col-md-10">
                        <button type="submit" className="btn btn-primary" onClick={e=>{this.onAllSubmit()}}>提交</button>
                      </div>
                  </div>
                </div>
              </div>
           </div>
        </div>
      )
    }
  }
export default SaveCategoryPage;

